<template>
  <div class="labor-container">
    <Headbar />
    <HeadMenu />
    <div class="labor-content">
      <div class="labor-banner">
        <div class="labor-documents yh-layout-box">
          <div class="labor-activity-text">劳保激情，要降温更要降价</div>
          <div class="labor-date">活动时间：2019年5月25日-2019年6月25日</div>
        </div>
      </div>
      <div class="labor-wrap-con">
        <div class="labor-wrap-bg">
          <div class="labor-bg-01 bg-common"></div>
          <div class="labor-bg-02 bg-common"></div>
          <div class="labor-bg-03 bg-common"></div>

        </div>
        <div class="labor-mainDemo-wrap yh-layout-box">
          <div class="labor-mainFigure">
            <div class="labor-main-headerImg"><img src="@/assets/images/activity/labor_05.png"/></div>
            <img src="@/assets/images/activity/labor_08.png" class="arrow-img"/>
            <div class="labor-main-ul">
              <div class="labor-main-list cursor" @click="routeToGoods('1131887771709931520')">
                <div class="labor-main-img">
                  <img src="@/assets/images/activity/labor_22.png"/>
                </div>
                <div class="labor-category">粉尘颗粒物防护</div>
              </div>
              <div class="labor-main-list cursor"  @click="routeToGoods('1106106845730242560')">
                <div class="labor-main-img">
                  <img src="@/assets/images/activity/labor_23.png"/>
                </div>
                <div class="labor-category">双佳有粉乳胶手套</div>
              </div>
              <div class="labor-main-list cursor"  @click="routeToGoods('1131892664004837376')">
                <div class="labor-main-img">
                  <img src="@/assets/images/activity/labor_24.png"/>
                </div>
                <div class="labor-category">GB21148-2007安全鞋</div>
              </div>
            </div>
          </div>
          <div class="labor-protect-item item-one">
            <div class="labor-common-title">劳动保护区</div>
            <div class="labor-protect-con">
              <div class="labor-protect-fl fl">
                <div class="category-header">手部保护</div>
                <div class="depaet-line"></div>
                <p class="features">
                  功能特点：防割防滑耐磨
                </p>
                <div class="market-price">市场价：￥63.00</div>
                <div class="distributor-price">
                  <span class="price-label">渠道商价格：</span>
                  <span class="price-num">￥44.00</span>
                </div>
                <p class="quantitative">最小起订量：12双/打，1打起订</p>
                <a class="buyNow-btn"  @click="routeToGoods('1131886515964674048')">立即抢购></a>
              </div>
              <div class="labor-protect-fr fl">
                <div class="labor-product">
                  <img src="@/assets/images/activity/labor_13.png">
                  <p>型号：EN388-3543</p>
                </div>
              </div>
            </div>
            <div class="labor-product-demo">
              <div class="labor-pd-demo-list cursor"   @click="routeToGoods('1131891249610031104')">
                <div class="labor-pd-img">
                  <img src="@/assets/images/activity/labor_25.png">
                </div>
                <p class="labor-pd-name fontCom cursor">GB12011-2009电绝缘鞋</p>
                <div class="labor-pd-marketP">市场价:<span class="priceFontW">￥398</span></div>
                <div class="labor-pd-qd"><span class="qd-label">渠道商价格:</span><span class="fontLarge">￥266</span></div>
                <p class="babor-min fontCom">最小起订量:10双/箱，1箱起订</p>
              </div>
              <div class="labor-pd-demo-list cursor"  @click="routeToGoods('1131889856169967616')">
                <div class="labor-pd-img">
                  <img src="@/assets/images/activity/labor_26.png">
                </div>
                <p class="labor-pd-name fontCom cursor">轻微有机气体防护</p>
                <div class="labor-pd-marketP">市场价:<span class="priceFontW">￥5.50</span></div>
                <div class="labor-pd-qd"><span class="qd-label">渠道商价格:</span><span class="fontLarge">￥3.85</span></div>
                <p class="babor-min fontCom">最小起订量：25个/盒，1盒起订</p>
              </div>
              <div class="labor-pd-demo-list cursor" @click="routeToGoods('1131892664004837376')">
                <div class="labor-pd-img">
                  <img src="@/assets/images/activity/labor_27.png">
                </div>
                <p class="labor-pd-name fontCom cursor">GB21148-2007安全鞋</p>
                <div class="labor-pd-marketP">市场价:<span class="priceFontW">￥458.00</span></div>
                <div class="labor-pd-qd"><span class="qd-label">渠道商价格:</span><span class="fontLarge">￥320.00</span></div>
                <p class="babor-min fontCom">最小起订量：10双/箱，1箱起订</p>
              </div>
              <div class="labor-pd-demo-list cursor" @click="routeToGoods('1131887771709931520')">
                <div class="labor-pd-img">
                  <img src="@/assets/images/activity/labor_28.png">
                </div>
                <p class="labor-pd-name fontCom cursor">粉尘颗粒物防护</p>
                <div class="labor-pd-marketP">市场价:<span class="priceFontW">￥3.71</span></div>
                <div class="labor-pd-qd"><span class="qd-label">渠道商价格:</span><span class="fontLarge">￥2.60</span></div>
                <p class="babor-min fontCom">最小起订量：25个/盒，1盒起订</p>
              </div>

            </div>
          </div>
          <div class="labor-protect-item">
            <div class="labor-common-title">手部保护区</div>
            <div class="labor-protect-con">
              <div class="labor-protect-fl fl">
                <div class="category-header">乳胶防护手套</div>
                <div class="depaet-line"></div>
                <p class="features">
                  功能特点：防割防滑耐磨
                </p>
                <div class="market-price">市场价：￥0.46</div>
                <div class="distributor-price">
                  <span class="price-label">渠道商价格：</span>
                  <span class="price-num">￥0.26</span>
                </div>
                <p class="quantitative">最小起订量：200-1999 个</p>
                <a class="buyNow-btn" @click="routeToGoods('1106098763042193408')">立即抢购></a>
              </div>
              <div class="labor-protect-fr fl">
                <div class="labor-product">
                  <img src="@/assets/images/activity/labor_33.png">
                  <p>12英寸无尘净化橡胶作业手套</p>
                </div>
              </div>
            </div>
            <div class="labor-product-demo">
              <div class="labor-pd-demo-list cursor" @click="routeToGoods('1106080459858706432')">
                <div class="labor-pd-img" >
                  <img src="@/assets/images/activity/labor_29.png">
                </div>
                <p class="labor-pd-name fontCom cursor">白丁腈防护手套</p>
                <div class="labor-pd-marketP">市场价:<span class="priceFontW">￥0.78</span></div>
                <div class="labor-pd-qd"><span class="qd-label">渠道商价格:</span><span class="fontLarge">￥0.58</span></div>
                <p class="babor-min fontCom">最小起订量：≥6000双</p>
              </div>
              <div class="labor-pd-demo-list cursor" @click="routeToGoods('1106094660157243392')">
                <div class="labor-pd-img">
                  <img src="@/assets/images/activity/labor_30.png">
                </div>
                <p class="labor-pd-name fontCom cursor">粉红色丁睛防油手套</p>
                <div class="labor-pd-marketP">市场价:<span class="priceFontW">￥0.35</span></div>
                <div class="labor-pd-qd"><span class="qd-label">渠道商价格:</span><span class="fontLarge">￥0.15</span></div>
                <p class="babor-min fontCom">最小起订量：≥6000个</p>
              </div>
              <div class="labor-pd-demo-list cursor" @click="routeToGoods('1106108003379118080')">
                <div class="labor-pd-img">
                  <img src="@/assets/images/activity/labor_31.png">
                </div>
                <p class="labor-pd-name fontCom" >氯丁橡胶手套</p>
                <div class="labor-pd-marketP">市场价:<span class="priceFontW">￥0.40</span></div>
                <div class="labor-pd-qd"><span class="qd-label">渠道商价格:</span><span class="fontLarge">￥0.20</span></div>
                <p class="babor-min fontCom">最小起订量：≥10000双</p>
              </div>
              <div class="labor-pd-demo-list cursor" @click="routeToGoods('1106119154498338816')">
                <div class="labor-pd-img">
                  <img src="@/assets/images/activity/labor_32.png">
                </div>
                <p class="labor-pd-name fontCom cursor">蓝色劳保丁腈手套</p>
                <div class="labor-pd-marketP">市场价:<span class="priceFontW">￥0.45</span></div>
                <div class="labor-pd-qd"><span class="qd-label">渠道商价格:</span><span class="fontLarge">￥0.25</span></div>
                <p class="babor-min fontCom">最小起订量：≥10000双</p>
              </div>

            </div>
          </div>
          <div class="labor-rights">
            <div class="member-rights-item">
              <img src="@/assets/images/activity/labor_11.png" class="rights-tit"/>
              <div class="rights-cards">
                <div class="rights-card-ul">
                  <div class="rights-cards-list">
                    <img src="@/assets/images/activity/labor_15.png"/>
                    <h3>正品特价</h3>
                    <p>平台认证，正品保证</p>
                    <p>低价产品</p>
                  </div>
                  <div class="rights-cards-list">
                    <img src="@/assets/images/activity/labor_16.png"/>
                    <h3>优质货源</h3>
                    <p>业内知名企实力工厂，</p>
                    <p>品质保证</p>
                  </div>
                  <div class="rights-cards-list">
                    <img src="@/assets/images/activity/labor_17.png"/>
                    <h3>交易保障</h3>
                    <p>第三方担保，资金安全</p>
                    <p>平台售后服务支持</p>
                  </div>
                </div>

              </div>
              <p class="member-tips">我是采购商 我要免费注册成为采购会员</p>
              <div>
                <img  @click="routeToPath('/login/register', 'new')" src="@/assets/images/activity/labor_18.png" class="cursor"/>
              </div>
            </div>
            <img class="waves-bg" src="@/assets/images/activity/labor_10.png">
            <div class="partnerSupplier-rights-item">
              <img src="@/assets/images/activity/labor_12.png" class="partner-img"/>
              <div class="special-enjoy">
                <div class="special-enjoy-ul">
                  <div class="special-enjoy-list">
                    <img src="@/assets/images/activity/labor_01.png" class="enjoy-ico"/>
                    <h3>优先曝光</h3>
                    <p>优先获得百度、360等搜索引擎 </p>
                    <p>海量流量，提高产品曝光</p>
                  </div>
                  <div class="special-enjoy-list">
                    <img src="@/assets/images/activity/labor_02.png" class="enjoy-ico"/>
                    <h3>身份标识</h3>
                    <p>个性化旺铺，实地认证，活动 </p>
                    <p>产品页面及旺铺首页标签展示</p>
                  </div>
                  <div class="special-enjoy-list">
                    <img src="@/assets/images/activity/labor_03.png" class="enjoy-ico"/>
                    <h3>海量订单</h3>
                    <p>优先获得平台海量订单，更有</p>
                    <p>千万级优势供应商资源匹配</p>
                  </div>
                  <div class="special-enjoy-list">
                    <img src="@/assets/images/activity/labor_04.png" class="enjoy-ico"/>
                    <h3>共赢成长</h3>
                    <p>供应商将成为一呼百应长期合</p>
                    <p>作伙伴，共享品牌成长及推广资源</p>
                  </div>
                </div>
              </div>
              <div class="partnerSupplier-bottom">
                <h5>我是供应商 我要免费注册成为供应商会员</h5>
                <img  @click="routeToOut(URL.jumpSeller+'/seller/enter/register?staffId=', 'new')" src="@/assets/images/activity/labor_19.png" />
              </div>
            </div>

          </div>

          <div class="labor-security">
            <img src="@/assets/images/activity/labor_20.png" />
            <div class="info">
              <!-- <h6>实力，是一种责任</h6> -->
              <!-- <p>实力商家承诺三大保障服务</p> -->
              <h6><i></i>品质保障</h6>
              <p>若买家在线购买的商品品质与卖家承诺的不一致，卖家可发起质量问题投诉，平台协助处理；</p>
              <h6><i></i>发货保障</h6>
              <p>买家在线购买商品后，商家将在双方约定的交期内发货；</p>
              <h6><i></i>换货保障</h6>
              <p>买家在线购买的商品，在签收后的约定时间内若对商品不满意，可免费更换。</p>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="foot">
      <div class="container">
        <h6>免责声明</h6>
        <p>本次活动产品信息由供应商提供，信息涉及的内容最终解释权归一呼百应工业品直卖网所有，下单前请向活动主办方或者活动商家客服了解详情。</p>
      </div>
    </div>
    <div class="fixed-right-box">
      <img src="@/assets/images/activity/labor_34.png"/>
      <div class="labor-button fixed-button" @click="routeToPath('/activity/topics/labor')">劳动保护</div>
      <div class="hardwareTools-button fixed-button" @click="routeToPath('/activity/topics/hardwares')">五金工具</div>
      <!-- <div class="backToTop-button fixed-button" >
          <transition :name="transitionName">
            <div @click="backToTop">
              返回顶部
            </div>
          </transition>
      </div> -->
    </div>
  </div>
</template>

<script>
import Headbar from '@/components/Layouts/Headbar'
import HeadMenu from '@/components/Layouts/HeadMenu'

export default {
  name: 'Labor',
    props: {
    visibilityHeight: {
      type: Number,
      default: 400
    },
    backPosition: {
      type: Number,
      default: 0
    },
    transitionName: {
      type: String,
      default: 'fade'
    },
    upCart: {
      type: String,
      default: 0
    }
  },
  components: {
    Headbar,
    HeadMenu,

  },
  data() {
    return {
      isMoving: false,
    }
  },
  created() {

  },
    mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
    beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
    if (this.interval) {
      clearInterval(this.interval)
    }
  },
  methods: {
    backToTop() {
      if (this.isMoving) return
      const start = window.pageYOffset
      let i = 0
      this.isMoving = true
      this.interval = setInterval(() => {
        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
        if (next <= this.backPosition) {
          window.scrollTo(0, this.backPosition)
          clearInterval(this.interval)
          this.isMoving = false
        } else {
          window.scrollTo(0, next)
        }
        i++
      }, 16.7)
    },
    easeInOutQuad(t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t + b
      return -c / 2 * (--t * (t - 2) - 1) + b
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/pages/topics.scss';
</style>
